<template>
    <div id="common-layout">
        <div id="menus">
            <el-row class="el-row">
                <el-col :span="24" class="el-col">
                    <el-menu class="el-menu-vertical-demo" text-color="#fff" background-color="#304156"
                        unique-opened="true" router :collapse="data.collapse" @click="menuitem" @select="select"
                        default-active="/profile">
                        <el-menu-item index="1" class="div">
                            <img src='https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png' />
                            <span>imooc-admin</span>
                        </el-menu-item>
                        <el-menu-item index="/profile">
                            <el-icon>
                                <Avatar />
                            </el-icon>
                            <span>个人中心</span>
                        </el-menu-item>
                        <el-menu-item index="/chart">
                            <el-icon>
                                <Histogram />
                            </el-icon>
                            <span>数据可视化</span>
                        </el-menu-item>
                        <el-sub-menu index="/manage" style="background: #304156; ">
                            <template #title>
                                <el-icon>
                                    <Avatar />
                                </el-icon>
                                <span>用户</span>
                            </template>
                            <el-menu-item-group style="background: #304156;">
                                <el-menu-item index="/manage"><span class="icon iconfont icon-yuangongguanli"
                                        style="margin-right:10px;"></span>员工管理</el-menu-item>
                                <el-menu-item index="/role"><span class="icon iconfont icon-permissions-list"
                                        style="margin-right:10px;"></span>角色列表</el-menu-item>
                                <el-menu-item index="/permission"><span class="icon iconfont icon-quanxianguanli"
                                        style="margin-right:10px;"></span>权限列表</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="4" style="background: #304156; ">
                            <template #title>
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>文章</span>
                            </template>
                            <el-menu-item-group style="background: #304156;">
                                <el-menu-item index="/ranking"><span class="icon iconfont icon-wenzhangpailie-"
                                        style="margin-right:10px;"></span>文章排名</el-menu-item>
                                <el-menu-item index="/create"><span class="icon iconfont icon-yly_bianji"
                                        style="margin-right:10px;"></span>创建文章</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-col>
            </el-row>
        </div>
        <div class="body">
            <div class="top">
                <div class="navbar">
                    <div class="left">
                        <el-icon @click="menus" :size="28" style="margin: 10px;">
                            <Expand />
                        </el-icon>
                        <el-breadcrumb style="height: 100%; line-height: 50px;">
                            <el-breadcrumb-item>{{ data.title }}</el-breadcrumb-item>
                        </el-breadcrumb>
                        <div id="full_screen">
                            <span
                                :class="screen ? 'icon iconfont icon-quanjufangda' : 'icon iconfont icon-quanjusuoxiao'"
                                style="margin-right:10px;"></span>
                        </div>
                    </div>
                    <div class="right">
                        <img ref="buttonRef" src='https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png'
                            @click-outside="onClickOutside" class="tui">
                        <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" virtual-triggering>
                            <el-button @click="tui">退出</el-button>
                        </el-popover>
                    </div>
                </div>
                <div class="tags-view-container">
                    <div v-for="(item, index) in data.items" :key="index" class="tag"
                        :class="{ active: data.active == index }" @click="tablist(item, index)"
                        @contextmenu.prevent="prevent(index)">
                        <span class="icon iconfont icon-dian" style=" font-size: 20px;"
                            v-if="data.active == index"></span>
                        {{ item.title }}
                        <el-icon v-if="data.active != index" @click.stop="close(index)">
                            <CircleClose />
                        </el-icon>
                        <div v-if="data.preventcheck == index" class="div">
                            <p @click.stop="refresh">刷新</p>
                            <p @click.stop="right(index)">关闭右侧</p>
                            <p>关闭其他</p>
                        </div>
                    </div>

                </div>
            </div>
            <div class="center">
                <router-view v-slot="{ Component, route }">
                    <transition name="fade" mode="out-in">
                        <component :is="Component" :key="route.path" />
                    </transition>
                </router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, watch, getCurrentInstance, unref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import screenfull from "screenfull"
const store = useStore()
const router = useRouter()
window.addEventListener('click', guanbi)
function guanbi() {
    data.preventcheck = -1
}
const data = reactive({
    collapse: false,
    title: '',
    items: store.state.items,
    active: 0,
    preventcheck: -1
})
const right = (val) => {
    store.commit('right', val)
    router.go(0)
}
const refresh = () => {
    router.go(0)
}
const prevent = (index) => {
    data.preventcheck = index
    console.log(index);
}
const tablist = (item, index) => {
    data.active = index
    console.log(item);
    if (item.title === '个人中心') {
        router.push('/profile')
    }
    if (item.title === '数据可视化') {
        router.push('/chart')
    }
    if (item.title === '员工管理') {
        router.push('/manage')
    }
    console.log(data.active);
}
let screen = true
const menus = () => {
    if (!data.collapse) {
        data.collapse = true
    } else if (data.collapse) {
        data.collapse = false
    }

}
const tui = () => {
    router.push('/login');
    localStorage.removeItem('vuex')
}
const close = (i) => {
    // console.log(123,i);
    store.commit('del', i)

}
const select = (e) => {
    console.log(e);
}
const menuitem = (val) => {

    let title = (val.target).innerText
    if (val.target.innerText == '用户' || val.target.innerText == '文章') {
        return
    }
    store.commit('items', title)
    console.log('menus', data.items);
    let index = data.items.findIndex((item) => item.title == title)
    data.active = index
    console.log(index);

}
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
}
onMounted(() => {
    //   let menulist = store.state.menuList.permission.menus
    const element = document.getElementById("common-layout")
    document.getElementById("full_screen").addEventListener("click", () => {
        if (screen) {
            screenfull.request(element); // 元素全屏
            screen = false
            console.log('123', screen);
        }
        else if (!screen) {
            screenfull.exit(); // 退出全屏
            screen = true
            console.log('456', screen);

        }
    });
    // console.log(menulist);
});


</script>

<style lang='scss' scoped>
#common-layout {
    width: 100%;
    height: 100%;
    display: flex;

    .tui {
        width: 50px;
        height: 50px;
        margin-right: 30px;
    }

    #menus {
        background: #304156;
        height: 100%;
        .el-col {
            height: 100%;
            .div {
                // width: 100%;
                line-height: 50px;
                // margin-top: 10px;
                padding: 10px 20px;
                color: #fff;
                background: #304156;

                img {
                    width: 45px;
                    height: 45px;
                    float: left;
                    // margin-left: 40px;
                }

                span {
                    font-size: 18px;
                    font-weight: 800;
                    margin-left: 10px;
                }
            }
        }
    }

    .body {
        // background: hotpink;
        width: 100%;
        height: 100%;

        .top {
            width: 100%;
            height: 85px;

            // background: green;
            .navbar {
                width: 100%;
                height: 50px;
                // background: aqua;
                display: flex;
                justify-content: space-between;
                line-height: 50px;

                .left {
                    display: flex;
                    line-height: 50px;
                }

                // .right {}
            }

            .tags-view-container {
                position: relative;
                width: 100%;
                height: 32px;
                // background: gold;
                box-shadow: 0 1px 5px rgb(87, 87, 87);

                .div {
                    position: absolute;
                    width: 80px;
                    height: 120px;
                    background: #fff;
                    z-index: 999;
                    box-shadow: 1 10 10 #ccc;
                    text-align: center;

                    p {
                        margin-top: 5px;
                        color: #000;
                    }
                }

                .mx-1:hover {
                    cursor: pointer
                }

                .tag {
                    font-size: 14px;
                    display: inline-block;
                    background: #fff;
                    padding: 2px 10px;
                    cursor: pointer;
                    margin: 0 5px;
                    line-height: 20px;
                }

                .active {
                    background: #304156;
                    color: #fff;
                }
            }
        }

        .center {

            .fade-enter-from,
            .fade-leave-to {
                transform: translateX(20px);
                opacity: 0;
            }

            .fade-enter-to,
            .fade-leave-from {
                opacity: 1;
            }

            .fade-enter-active {
                transition: all 0.7s ease;
            }

            .fade-leave-active {
                transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
            }
        }
    }
}
</style>

